Added additional comments to App.jsx and Messages.jsx#1
Open
Kamarasinghe wants to merge 2 commits intomasterfrom
Open
Added additional comments to App.jsx and Messages.jsx#1Kamarasinghe wants to merge 2 commits intomasterfrom
Kamarasinghe wants to merge 2 commits intomasterfrom
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
I chose to use modals throughout because I believe it makes for a better user experience if the user isn't redirected from page to page. The state stored in each component is changed according to user input whereas the Redux store is used to set persistent data such as username and if their admin. I chose to do conditional rendering if the user is signed in so that they aren't shown to sign in or sign up, plus greeting the user when they are signed in would make for a good user experience.
The messages component handles the bulk of functionality within the site. This component is basically one big table for easy placement of individual placement like message information, pagination, message input, and the edit/delete icons. I chose to set the number of messages visible at a time to 5 so that I can show the functionality of the pagination filtering effectively. Conditional rendering of the edit and trashcan icons is so that the user can only edit/delete their own message if they are not an admin(can edit/delete any users' message). I limited the number of characters a user can input to at least 4 so that they are not able to spam small messages and at most 70 characters to maintain the structural integrity of the table. Instead of redirecting a user to a different page to edit their message, that conditionally renders depending on if the user has selected a message.
For unit testing, I chose to use Jest since they are known for their zero configuration and is a pretty popular testing framework among devs. I paired it with Enzyme due to it being pretty much the go to testing utility for testing React components. I was mainly testing functionality of the component, making sure the functions/events changed the state as it was supposed to and making sure elements rendered properly.
For the overall look of the site, I used Bootstrap with Reactstrap on top which just makes it easier to use Bootstrap 4 components within React.